<!--
 * @Author: your name
 * @Date: 2021-08-02 05:03:43
 * @LastEditTime: 2021-08-30 16:25:21
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \aircityinit\src\components\Header\header.vue
-->
<template>
  <div class="header">
    <div class="left">
      <div class="daytime">
        <div>{{ daytime.time }}</div>
        <div>{{ daytime.day + daytime.xing }}</div>
      </div>
      <div id="he-plugin-simple"></div>
    </div>
    <div class="center">圳智慧·智慧南山</div>
    <div class="right"><button @click="moveCar">移动车</button></div>
  </div>
</template>

<script>
// import dayjs from "dayjs";
export default {
  data() {
    return {
      daytime: {
        time: "",
        day: "",
        xing: "",
      },
      timer: null,
      testCord: [
        [-396.6846618652344, -161.7152099609375, 0.8887035846710205],
        [-396.517822265625, -171.4823455810547, 0.8886987566947937],
        [-396.60198974609375, -188.26023864746094, 0.8886987566947937],
        [-397.4913024902344, -202.28689575195312, 0.8887012004852295],
      ],
      cord: [
        [25.589448928833008, 27.201313018798828, 0.8887012004852295],
        [25.991941452026367, -27.665273666381836, 0.8886914253234863],
        [27.3067684173584, -60.564571380615234, 0.8887012004852295],
        [39.2449836730957, -77.50564575195312, 0.8887012004852295],
        [89.17135620117188, -74.93714141845703, 0.8886975049972534],
        [101.0880355834961, -64.18911743164062, 0.8886938691139221],
        [100.41729736328125, -44.368221282958984, 0.8886963129043579],
        [100.33465576171875, -16.239154815673828, 0.8886987566947937],
        [100.20004272460938, 18.503328323364258, 0.8886999487876892],
        [100.29444122314453, 45.441837310791016, 0.8887060284614563],
        [95.1089859008789, 50.22671890258789, 0.8886999487876892],
        [64.01663208007812, 49.34157180786133, 0.8886975049972534],
        [32.498619079589844, 48.62852478027344, 0.8886987566947937],
        // [35.84980392456055, -76.11043548583984, 0.8887109160423279],
        // [48.06985855102539, -81.26106262207031, 0.8887012004852295],
        // [95.55914306640625, -73.75715637207031, 0.8887012004852295],
      ],
    };
  },
  methods: {
    getdaytime() {
      this.timer = setInterval(() => {
        this.daytime.time = dayjs().format("HH:mm");
        this.daytime.day = dayjs().format("YYYY/MM/DD");
        let xing = dayjs().day();
        switch (xing) {
          case 0:
            xing = "星期日";
            break;
          case 1:
            xing = "星期一";
            break;
          case 2:
            xing = "星期二";
            break;
          case 3:
            xing = "星期三";
            break;
          case 4:
            xing = "星期四";
            break;
          case 5:
            xing = "星期五";
            break;
          case 6:
            xing = "星期六";
            break;
          default:
            break;
        }
        this.daytime.xing = xing;
      }, 1000);
    },
    moveCar() {
      let arr = new Array(30);
      arr.fill(0);
      arr.forEach(async (item, index) => {
        await __g.customObject.delete(index);
        let obj = {
          id: index,
          pakFilePath: HostConfig.Path + "/media/custom.pak",
          assetPath: "/Game/Common/Asset_Bank/Mesh/Car/BP_Car_JiuHuChe",
          location: this.cord[0],
          rotation: [0, 0, 0],
          scale: [1, 1, 1],
          smoothMotion: 1, //1: 平滑插值，0: 跳跃
          // coordinateType: 1, //设置坐标系：0(Projection), 1(WGS84)
        };
        await __g.customObject.add(obj);
        var index = 0;
        setInterval(async () => {
          if (++index > this.cord.length) index = 0;
          let pos = this.cord[index];
          // console.log(pos, "pos");
          await __g.customObject.setLocation(obj.id, pos);
        }, 1200);
      });
    },
  },
  created() {
    // this.getdaytime();
    console.log("created-header");
    window.WIDGET = {
      CONFIG: {
        modules: "01342",
        background: "5",
        tmpColor: "60D4F1",
        tmpSize: "70",
        cityColor: "FFFFFF",
        citySize: "0",
        aqiColor: "FFFFFF",
        aqiSize: "30",
        weatherIconSize: "70",
        alertIconSize: "30",
        padding: "10px 10px 10px 40px",
        shadow: "0",
        language: "zh",
        fixed: "false",
        vertical: "center",
        horizontal: "left",
        // city: 'CN101280108',
        key: "8f553a8fa0e246cc9cda29b8e831befc",
      },
    };
    var script = document.createElement("script");
    script.type = "text/javascript";
    script.src =
      "https://widget.qweather.net/simple/static/js/he-simple-common.js?v=2.0";
    document.getElementsByTagName("head")[0].appendChild(script);
  },
  beforeDestroy() {
    clearInterval(this.timer);
  },
};
</script>

<style lang="scss" scoped>
.header {
  display: flex;
  width: 100%;
  height: 56px;
  position: absolute;
  text-align: center;
  justify-content: space-between;
  z-index: 100;
  // background: linear-gradient(to bottom,"#64757b","#abb6c7");
  background: linear-gradient(180deg, #697b8171, #abb6c742);
  padding: 0 50px;
  .left,
  .center,
  .right {
    height: 100%;
    > div {
      height: 100%;
    }
  }
  .left {
    display: flex;
    .daytime {
      text-align: left;
      div:nth-child(2) {
        color: #d6d9dd;
      }
    }
    #he-plugin-simple {
      font-size: 20px;
      display: none;
      .s-sticker {
        height: 100%;
        // font-size: 20px !important;
      }
    }
  }
}
</style>
